<template>
  <div class="colorRulesVue">
    <div class="colorRulesVueBox relative">
      <div class="colorRulesTitle"><p><img class="lotteryIcon" :src="colorRulesData.icon" alt="">{{colorRulesData.name}}</p></div>
      <nav class="colorRulesNav">
        <!--<li>游戏规则</li>-->
        <li v-for="(playItem,index) in palyData" :class="{on:isCredit == index}"
            @click="getRules(currentCode,index)">{{playItem}}
        </li>
      </nav>
      <div class="colorRulesContentBox scrollBar">
        <div class="colorRulesContent" v-html="colorRulesData.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import './colorRules.scss';

  export default {
    data() {
      return {
        colorRulesData: {
          icon:'',
          name: '广东11选五',
          content: '大师兄，师傅被妖怪抓走啦'
        },
        palyData: ['官方玩法', '信用玩法'],
        isCredit: "-1",
        currentCode:'',
      }
    },
    activated() {
      this.init();
    },
    methods: {
      init() {
        let height = $(window).height();
        $('.colorRulesVue').height(height - 64-68);
        $('.colorRulesNav').width($(".colorRulesVueBox").width());
        this.currentCode = this.$route.query.code;
        this.initData(this.$route.query.code);
      },
      initData(code) {
        let that = this;
        that.checkOfficial(code);
        that._Util.post(that, that._Api.POST_GET_INDEX_LOTTERY_DATA, {lotteryCode: code}, (data) => {
          that.colorRulesData.icon = data.icon;
          that.colorRulesData.name = data.name;
          that.colorRulesData.content = data.regulation;
          that.currentCode = code;
        })
      },
      //判断官方还是信用
      checkOfficial(code) {
        if (code === '002' || code === '004' || code === '006' || code === '008' || code === '010' ||code === '023' || code === '016' || code === '018'||code === '020'||code === '022'||code === '026') {
          this.isCredit = 0;
        } else {
          this.isCredit = 1;
        }
      },
      //官方信用规则切换
      getRules(code, index) {
        let that = this;
        if (that.isCredit != index) {
          if (that._Util.checkLotteryCode(code) == '-1') {
            that._Util.showAlert("暂时还未开通该玩法哦");
          } else {
            this.initData(that._Util.checkLotteryCode(code));
          }
        }
      },
    },
    watch: {
      '$route.query.code'(val) {
        if (this.$router.history.current.name !== 'colorRules') return;
        this.initData(val);
      }
    }
  }
</script>
